<template>
  <view>
    <view class="header">
      <u-notice-bar speed="50" :text="notice"></u-notice-bar>
      <search-page
        :placeholder="placeholder"
        :hotList="hotList"
        :hMax="hMax"
        :showHistory="showHistory"
        :showHot="showHot"
        :hType="hType"
        :oType="oType"
        :focus="focus"
        @search="search"
        @focus="handleFocus"
        @close="closeSearch"
      ></search-page>

      <view class="filter-box">
        <u--form labelPosition="left" :model="form" ref="form1" labelWidth="140rpx">
          <u-form-item
            v-if="areaActions.length > 0"
            label="配送地区"
            borderBottom
            @click="
              showArea = true;
              hideKeyboard();
            "
            ref="item1"
          >
            <u--input v-model="form.area.name" disabled disabledColor="#ffffff" placeholder="可选" border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
          <u-form-item
            v-if="categoryActions.length > 0"
            label="商品分类"
            borderBottom
            @click="
              categoryArea = true;
              hideKeyboard();
            "
            ref="item1"
          >
            <u--input v-model="form.category.name" disabled disabledColor="#ffffff" placeholder="可选" border="none"></u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item>
        </u--form>
        <u-picker :show="showArea" :columns="areaActions" keyName="name" title="请选择配送地区" @cancel="areaCancel" @close="showArea = false" @confirm="areaSelect"></u-picker>
        <u-picker
          :show="categoryArea"
          :columns="categoryActions"
          keyName="name"
          title="请选择商品分类"
          @cancel="categoryCancel"
          @close="categoryArea = false"
          @confirm="categorySelect"
        ></u-picker>
      </view>

      <view class="list-box">
        <view class="goods" v-for="(item, index) in data" :key="index" @click="openDetails(item)">
          <!-- <view class="goods-left">
        				<image :src="item.image" lazy-load></image>
        			</view> -->
          <view class="goods-right">
            <view class="goods-name">
              <text class="tag">{{ item.productCategory }}</text>
              {{ item.productName }}
            </view>
            <view class="tips-box" v-if="item.price">
              <view class="tips-title"><text style="width: 130rpx;">商品价格：</text></view>
              <view class="tips-content">
                <text class="tag">{{ item.price }}</text>
              </view>
            </view>
            <view class="tips-box">
              <view class="tips-title"><text style="width: 130rpx;">配送范围：</text></view>
              <view class="tips-content">
                <text class="tag success-tag">{{ item.deliverArea }}</text>
              </view>
            </view>
            <view class="tips-box">
              <view class="tips-title"><text style="width: 130rpx;">起送要求：</text></view>
              <view class="tips-content">
                <text>{{ item.purchaseNotes }}</text>
              </view>
            </view>
            <view class="tips-box" v-if="item.contactPhone">
              <view class="tips-title"><text style="width: 130rpx;">联系方式：</text></view>
              <view class="tips-content" @click.stop="makePhoneCall(item.contactPhone)">
                <template v-if="!parseInt(item.contactPhone, 10)">
                  <text>{{ item.contactPhone }}</text>
                </template>
                <template>
                  <div v-for="(item,index) in item.contactPhone.split(',')" :key="index" :style="index == 0 ?'':'margin-top: 10rpx;'">
                    <text>{{ item }}</text>
                    <text v-if="parseInt(item, 10)" class="phone-call">一键拨号</text>
                  </div>
                </template>
              </view>
            </view>
            <view class="tips-box">
              <view class="tips-title"><text style="width: 130rpx;">提供企业：</text></view>
              <view class="tips-content">
                <text class="">{{ item.supportCompany }}</text>
              </view>
            </view>
            <view class="bottom-box">
              <view class="bottom-txt">
                <view class="sale-num">
                  <text>
                    信息来源：
                    <u-link
                      v-if="item.addressType == '2' && item.productAddress"
                      :href="item.productAddress"
                      :text="item.infoResourse"
                      :underLine="true"
                      @click.stop="click"
                    ></u-link>
                    <text v-else >{{ item.infoResourse }}</text>
                  </text>
                </view>
              </view>
              <view class="bottom-txt">
                <view class="sale-num">
                  <text>发布日期：{{ item.releaseTime.substr(5) }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <u-empty :show="total == 0" mode="search" icon="http://cdn.uviewui.com/uview/empty/search.png"></u-empty>
      </view>
    </view>
    <view class="technical-support" v-if="!loading"><text style="color: #999;">诚招赞助商提供本网站后续维护资金</text></view>
  </view>
</template>

<script>
import dayjs from 'dayjs';
import searchPage from '@/components/search-page/index.vue';
export default {
  components: {
    searchPage
  },
  data() {
    return {
      notice: `最新更新时间：4月14日23时43分，目前已有3158条商品数据，530个供应商，12个商品分类，16个配送区域。本网站为抗疫临时开发搭建，由志愿者组团开发和运营。感谢第三方不留名企业赞助临时云服务器和域名。如有违规请联系微信iain125关闭本站。因紧急上线，需求考虑不周，诚邀广大市民朋友反馈使用意见，共同完善网站的建设。上海加油，我们终将迎来疫情解封的春暖花开之日。数据来源——消保委+企业官方公众号`,
      // 搜索相关
      placeholder: '可搜索物资或地区',
      // 热门搜索列表
      hotList: ['奶粉','纸尿裤','牛奶','大米','蔬菜','鲜奶','卫生巾','猪肉','蛋糕','咖啡'],
      // 最多保留历史记录条数
      hMax: 10,
      // 是否显示历史记录
      showHistory: false,
      // 是否显示热门搜索
      showHot: false,
      // 历史记录文本样式
      hType: 'round',
      // 热门搜索文本样式
      oType: 'square-fill',
      // 输入框是否自动聚焦
      focus: false,
      form: {
        keywords: '',
        area: {},
        category: {}
      },
      showArea: false,
      //
      areaActions: [
        // {
        //   id:1,
        //   name: '全市',
        // },
        // {
        //   id:2,
        //   name: '浦东',
        // },
      ],
      categoryArea: false,
      //
      categoryActions: [],
      // 商品列表
      data: [],
      clickUrl: '',
      reflectKey: {
        type: Object,
        default: {
          id: 'id',
          image: 'image',
          price: 'price',
          delPrice: 'delPrice',
          coupon: 'coupon',
          saleNum: 'saleNum',
          platform: 'platform'
        }
      },
      // 加载状态
      loading: false,
      // 分页
      pageNum: 1,
      total: 1
    };
  },
  // 监听页面加载，其参数为上个页面传递的数据，参数类型为Object
  onLoad() {
    this.search('');
    this.getAreaList();
    this.getCategoryList();
  },
  // 监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  // 监听窗口尺寸变化 仅限 App、微信小程序
  onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {
    this.pageNum = 1;
    this.getGoodsList();
  },
  // 页面上拉触底事件的处理函数
  onReachBottom() {
    this.getGoodsList();
  },
  // 用户点击右上角分享 仅限 微信小程序、百度小程序、头条小程序、支付宝小程序
  onShareAppMessage() {},
  // 监听页面滚动，参数为Object
  onPageScroll() {},
  methods: {
    search(text) {
      console.log(text);
      this.form.keywords = text;
      // 历史记录
      this.showHistory = false;
      // 热门搜索
      this.showHot = false;
      this.pageNum = 1;
      // 查询列表
      this.getGoodsList();
    },
    /* 注意：请勿与data中命名冲突 */
    handleFocus(e) {
      console.log(e);
      // 历史记录
      this.showHistory = true;
      // 热门搜索
      this.showHot = true;
    },
    // handleBlur(e) {
    //   debugger
    //   this.form.keywords = e.detail.value;
    //   // 历史记录
    //   this.showHistory = false;
    //   // 热门搜索
    //   this.showHot = false;
    //   this.pageNum = 1;
    //   // 查询列表
    //   this.getGoodsList();
    // },
    closeSearch(e) {
      if (this.form.keywords != '') {
        this.form.keywords = '';
        this.pageNum = 1;
        // 查询列表
        this.getGoodsList();
      }
      // 历史记录
      this.showHistory = false;
      // 热门搜索
      this.showHot = false;
    },
    // 地区筛选
    areaSelect(e) {
      this.form.area = e.value[0];
      this.pageNum = 1;
      // 查询列表
      this.getGoodsList();
      this.showArea = false;
    },
    areaCancel() {
      this.form.area = {};
      this.pageNum = 1;
      // 查询列表
      this.getGoodsList();
      this.showArea = false;
    },
    // 分类筛选
    categorySelect(e) {
      this.form.category = e.value[0];
      this.pageNum = 1;
      // 查询列表
      this.getGoodsList();
      this.categoryArea = false;
    },
    categoryCancel() {
      this.form.category = {};
      this.pageNum = 1;
      // 查询列表
      this.getGoodsList();
      this.categoryArea = false;
    },
    // 商品列表
    getGoodsList() {
      if (this.loading) {
        return;
      }
      const params = {
        areaId: this.form.area.id + '',
        categoryId: this.form.category.id + '',
        keywords: this.form.keywords,
        pageNum: this.pageNum,
        pageSize: 10
      };
      // if(this.form.area.id){
      //   params.area = this.form.area.id
      // }
      // if(this.form.category.id){
      //   params.category = this.form.category.id
      // }
      this.loading = true;
      uni.showLoading({
        title: '加载中'
      });
      if (this.pageNum == 1) {
        this.data = [];
      }
      this.$api.goods
        .product(params)
        .then(res => {
          if (this.pageNum == 1) {
            this.data = res.data.items;
          } else {
            this.data.push(...res.data.items);
          }
          this.total = res.data.total;
          this.pageNum++;
          uni.hideLoading();
          // 停止当前页面下拉刷新
          uni.stopPullDownRefresh();
          this.loading = false;
        })
        .catch(err => {
          uni.hideLoading();
          // 停止当前页面下拉刷新
          uni.stopPullDownRefresh();
          this.loading = false;
          console.log(err);
        });
    },

    // 配送地区列表
    getAreaList() {
      this.$api.goods
        .area()
        .then(res => {
          this.areaActions = [res.data];
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 商品分类列表
    getCategoryList() {
      this.$api.goods
        .category()
        .then(res => {
          this.categoryActions = [res.data];
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 打开详情
    openDetails(item) {
      // if (item.addressType == '1') {
      //   // if(item.productAddress.indexOf('wx_fmt')>=0){
      //   //    item.productAddress = item.productAddress.substring(0,item.productAddress.lastIndexOf('?') )
      //   // }
      //   // 预览图片
      //   // uni.previewImage({
      //   //   urls: [item.productAddress],
      //   // });
      // }
      // if(item.addressType == '2'){
      //   window.location.href = item.productAddress
      // }
      if (item.productAddress) {
        // window.location.href = item.productAddress
        window.open(item.productAddress, '_self');
      } else {
        this.$u.toast('暂无信息来源链接');
      }
    },
    makePhoneCall(phoneNumber) {
      if (phoneNumber && parseInt(phoneNumber, 10)) {
        uni.makePhoneCall({
          phoneNumber: phoneNumber
        });
      }
    },
    hideKeyboard() {
      uni.hideKeyboard();
    }
  }
};
</script>

<style lang="scss" scoped>
page {
  background-color: $bg;
}
.header {
  background-color: #fff;
  .filter-box {
    padding: 0 40rpx 20rpx 40rpx;
  }
}

.list-box {
  padding-top: 1px;
  background-color: $bg;
}
.goods {
  background-color: #fff;
  padding: 32rpx;
  padding-bottom: 20rpx;
  display: flex;
  font-size: 28rpx;
  margin: 20rpx;
  border-radius: 4px;
}

.goods-left {
  flex: 0 0 35%;
  margin-right: 30rpx;
  image {
    width: 100%;
    height: 250rpx;
    border-radius: 5px;
  }
}

.goods-right {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .bottom {
    margin-bottom: 4px;
    font-weight: normal;
  }
}
.goods-name {
  font-size: 36rpx;
  color: #000;
  font-weight: 500;
  .tag {
    background-color: $theme-color-secondary;
    color: #fff;
    font-size: 28rpx;
    font-weight: normal;
    line-height: 1;
    padding: 2rpx 10rpx;
    border-radius: 3px;
    // border: 1px solid  #f9ae3d;
    margin-right: 4px;
  }
}

.tips-box {
  display: flex;
  margin-top: 10rpx;
  font-size: 32rpx;
  color: #666;
  .tips-title {
  }
  .tips-content {
    flex: 1;
    color: #333;
    .tag {
      // background-color: #f9ae3d;
      color: $theme-color-secondary;
      font-size: 32rpx;
      font-weight: 600;
      // font-weight: normal;
      line-height: 1;
      // padding: 4rpx 10rpx;
      border-radius: 3px;
      // border: 1px solid  #f9ae3d;
      margin-right: 4px;
    }
    .phone-call {
      background-color: #4cd964;
      color: #fff;
      height: 28rpx;
      line-height: 28rpx;
      font-size: 28rpx;
      font-weight: normal;
      padding: 2rpx 10rpx;
      border-radius: 3px;
      // border: 1px solid  #f9ae3d;
      margin-left: 10px;
    }
    .success-tag {
      color: $uni-color-success;
    }
  }
}
.coupon {
  padding: 10rpx 30rpx;
  width: 25%;
  // background-image: url('../../static/coupon1.png');
  background-size: 100% 100%;
  // color: #fff;
  font-size: 24rpx;
  font-weight: normal;
  margin-bottom: 10rpx;
}
.bottom-box {
  display: flex;
  justify-content: space-between;
  margin-top: 10rpx;
  .resourse {
    color: $uni-color-primary;
  }
}
.bottom-txt {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  .sale-num {
    color: #999;
    font-size: 26rpx;
    font-weight: normal;
    margin-bottom: 2px;
  }
}
.flex {
  display: flex;
}

.technical-support {
  text-align: center;
  margin-top: 10rpx;
}
</style>

<style lang="scss">
.u-link {
  display: inline-block;
}
</style>
